<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>核心组件： 路由-编程式的导航</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <h3>数据01,02,03放在template里循环</h3>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>

        <button @click="goIndex">返回首页</button>
        <button  @click="back">返回上一级</button>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<template id="home">
    <div>
        <h2>Home</h2>
        <!--home层增加路由-->
        <router-link to="/home/news">news</router-link>
        <router-link to="/home/message">message</router-link>

        <router-view></router-view>
    </div>

</template>

<template id="news">
    <div>
        <ul>
            <li>
                <router-link  :to="{ name: 'detail', params: { id: '01' }}">
                    News 01
                </router-link>

            </li>
            <li>
                <router-link  :to="{ name: 'detail', params: { id: '02' }}">News 02</router-link>

            </li>
            <li>
                <router-link  :to="{ name: 'detail', params: { id: '03' }}">  News 03</router-link>

            </li>
        </ul>
        <router-view></router-view>
    </div>


</template>

<template id="message">
    <ul>
        <li>Message 01</li>
        <li>Message 02</li>
        <li>Message 03</li>
    </ul>
</template>
<script>

    // 定义组件
    const Home ={template: "#home"};
    const About ={template: "<div style='color: crimson;font-weight: bold;'>Aount</div>"};

    //定义子路由
    const News={template: "#news"};
    const  Message={template: "#message"};

    //
    const  NewsDetail ={template:"<div>News Detail-{{$route.params.id}}</div>"};
    //把组件放到路由里
    const routes=[
        {path:"/home",component:Home,
            children: [
                {
                    path: 'news',
                    component: News,
                    children:[
                        {
                            name:"detail",
                            path:"detail/:id",
                            component:NewsDetail,//绑定路由
                        }
                    ]

                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
        {path:"/about",component:About}
    ];
    //定义路由对象，把上面的内容-路径传入路由对象
    const router=new VueRouter({
        routes
    });
    //启动vue

    const app= new Vue({
        router,
        methods:{
            goIndex:function () {
                this.$router.push({ path: '/' })

            },
            back:function () {
                this.$router.go(-1);
            }
        }
    }).$mount("#app")
</script>
</body>
</html>
